<template>
  <div>
    <h1 class="todo">待办</h1>
    <div class="input-part">
      <el-input v-model="words" type="text" style="width:20%" @keyup.enter="enterSubmitMember" />
      <el-button v-on:click="insertItem" type="primary" plain>新增</el-button>
    </div>
    <ul>
      
      <!-- <li v-for="(item, index) in list" v-bind:key="index">
        <p> {{item}} </p>
      </li> -->
      <li v-for="(item, index) in list" v-bind:key="index">
          <todo-list-item 
            v-bind:item="item" 
            v-bind:index="index" 
            v-on:deleteItem="deleteItem"
            v-on:modifyItem="modifyItem"
            ></todo-list-item>
      </li>
    </ul>
  </div>
</template>
<script>
import todoListItem from '@/components/todoListItem'
export default {
  name: 'todoList',
  components: {
    todoListItem
  },
  data() {
    return {
      words : '',//输入框内容
      list: [],//列表内容
    }
  },
  created() {//创建方法: 
    let that = this;
    document.onkeydown = function(e) {
      let key = window.event.keyCode;
      if(key == 13) {
        that.enterSubmitMember();
      }
    }
  },
  methods:{
    insertItem() {
      if(this.words == '' || this.words == null) {
        this.setWarnMessage('新增项不能为空!');
        return false;
      }
      this.list.push(this.words);
      this.words = '';
    },
    enterSubmitMember() {
      this.insertItem();
    },
    deleteItem(index) {
      this.list.splice(index, 1);//删除一个元素
    },
    modifyItem(newContent, index) {
      this.list.splice(index, 1, newContent);//替换元素内容
    }
  }
}
</script>
<style scoped>
  .todo {
    color: coral;
  }
</style>